<template>
    <div id="app" class="wrapper">
      <img class="wrapper__img" src="./images/user.png" alt="user">
      <div class="wrapper__input">
        <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
      </div>
      <div class="wrapper__input">
        <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
      </div>
      <div class="wrapper__loginButton" v-on:click="Login">登陆</div>
      <div class="wrapper__register">
        <span>立即注册</span>
        <div class="seperator"></div>
        <span>忘记密码</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userName: '',
        password: ''
      };
    },
    methods: {
      Login() {
        console.log(this.userName, this.password);
        if (this.userName.length > 0 && this.password.length > 0) {
          alert(`用户名: ${this.userName} 密码: ${this.password}`);
        } else {
          alert("请输入用户名密码");
        }
      }
    }
  };
  </script>
  
  <style scoped>
* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 100px;
}

/* 1rem = html.font-size */
body {
    font-size: .18rem;
}

.wrapper {
    /*垂直居中*/
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.wrapper__img {
    /*block + margin 水平居中*/
    display: block;
    margin: 0 auto .4rem auto;
    width: .66rem;
    height: .66rem;
}

.wrapper__input {
    height: .48rem;
    /*水平居中*/
    margin: 0 .4rem .16rem .4rem;
    background: #f9f9f9;
    /*圆角*/
    border-radius: 6px;
    /*边框*/
    border: 1px solid rgba(0, 0, 0, .1);
}

.wrapper__input__content {
    box-sizing: border-box;
    width: 100%;
    height: .48rem;
    border: none;
    outline: none;
    background: none;
    padding: 0 .16rem;
}

input::placeholder {
    color: rgba(0, 0, 0, .5);
}

.wrapper__loginButton {
    margin: .32rem .4rem 0 .4rem;
    background: #0091FF;
    box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, .32);
    border-radius: 0.4rem;
    color: #fff;
    line-height: .48rem;
    font-size: .16rem;
    text-align: center;
}

.wrapper__register {
    margin: .32rem .4rem .16rem .4rem;
    font-size: .14rem;
    color: #777;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
}
.seperator {
    width: 0.02rem;
    height: 0.12rem;
    background-color: #777;
}
  </style>
  
